import React, { Component } from "react";
import Logo from "../../component/logo";
import { List, InputItem, WingBlank, WhiteSpace, Button } from "antd-mobile";
import {Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
import {login} from '../../redux/user.redux'
import imoocForm from '../../component/imooc-form'





// function WrapperHello(Comp){
//   class WrapComp extends Component{
//     constructor(){
//     }
//     componentDidMount(){
//       console.log('222')
//     }
//     render(){
//       return(
//         <div>
//         <Comp {...this.props}></Comp>
//       </div>
//       )
//     }
//   }
//   return WrapComp
// }

// // Hello = WrapperHello(Hello)
// @WrapperHello
// class Hello extends Component{
//   componentDidMount(){
//     console.log('hello')
//   }
//   render(){
//     return     <div>test hello</div>
//   }
// }


@connect(
  state=>state.user,
  {login}
)
@imoocForm


class Login extends Component {
  constructor(props) {
    super(props);
    this.register = this.register.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }
  handleLogin(){
    this.props.login(this.props.state)
  }
  register() {
    this.props.history.push("/register");
  }
  render() {
    return (
      <div>
         {this.props.redirectTo?<Redirect to={this.props.redirectTo}></Redirect>:null}
        <Logo />
        <WingBlank>
          <List>
            {this.props.msg?<p className="error-msg">{this.props.msg}</p>:null}
            <InputItem onChange={v => this.props.handleChange("user", v)}>
              用户名
            </InputItem>
            <InputItem
              type="password"
              onChange={v => this.props.handleChange("pwd", v)}
            >
              密码
            </InputItem>
          </List>
          <WhiteSpace />
          <Button type="primary" onClick={this.handleLogin}>登录</Button>
          <WhiteSpace />
          <Button type="primary" onClick={this.register}>
            注册
          </Button>
        </WingBlank>
      </div>
    );
  }
}

export default Login;
